<template>
  <div class="box">
    <div class="box-header" :title="hintText">
      <span class="title pos-left">{{title}}</span>
    </div>
    <div class="box-body">
      <div class="chart" id="chart-risk-3"></div>
      <ul class="towerlist">
        <li class="item">

          <div class="title">产生超时事务</div>
          <div class="subtitle num fg-red">{{overtimedCount}}</div>
        </li>
        <li class="item">
          <div class="title">及时处理事务</div>
          <div class="subtitle num fg-green">{{normalCount}}</div>
        </li>
        <li class="item">
          <div class="title">事务整体及时率</div>
          <div class="subtitle num fg-cyan">
            {{timelinessRate}}
            <small>%</small>
          </div>
        </li>
      </ul>
      <x-loading v-if="showLoading"></x-loading>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";
import bus from '@/utils/bus'//引入支持库

export default {
  data() {
    return {
      hintText: "显示本年事项时效性数据",
      overtimedCount: 0,
      normalCount: 0,
      timelinessRate: 0,
      showLoading: false,
      chartInstance: null,
      startTime:new Date().getFullYear()+"-01-01",
      endTime:this.dateShift(0),
      option: null,
      chartData: null
    };
  },
  props: {
    title: String
  },
  components: {
    "x-loading": Loading
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      this.showLoading = true;
      let params = {
          startTime:this.startTime + ' 00:00:00',
          endTime:this.endTime + ' 23:59:59'
      };
      axios.get(this.URLHEAD + "SXSXXQKGL",{
        params:params
      }).then(res => {
        let json = res.data;
        
        this.overtimedCount=res.data.Data.CS_Count;
        this.normalCount=res.data.Data.JS_Count;
        this.timelinessRate=res.data.Data.JS_Rate;
        bus.$emit('complete2',this.timelinessRate);//兄弟传值
        this.option = {
          color: ["#3398DB"],
          tooltip: {
            trigger: "axis",
            axisPointer: { 
              type: "shadow", 
              lineStyle: { opacity: 1 } 
            }
          },
          legend: { data: ["逾期区间", "背景"], show: false },
          grid: {
            left: "0%",
            right: "5%",
            bottom: "5%",
            top: "7%",
            height: "85%",
            containLabel: true,
            z: 22
          },
          yAxis: [
            {
              type: "category",
              gridIndex: 0,
              axisTick: { alignWithLabel: true },
              axisLine: { 
                lineStyle: { color: "rgba(255,255,255,0.3)" } 
              },
              data:json.Data.DataList.map(item=>{
                return item.Name
              }),
              axisLabel: {
                show: true,
                color: "rgba(255,255,255,0.6)",
                fontSize: 12
              }
            }
          ],
          xAxis: [
            {
              type: "value",
              gridIndex: 0,
              splitLine: { 
                show: true,
                lineStyle:{
                  color:'rgba(255,255,255,0.25)'
                } 
              },
              axisTick: { show: false },
              axisLine: { 
                lineStyle: { color: "rgba(255,255,255,0.3)" } 
              },
              axisLabel: {
                color: "rgba(225,225,225,0.6)",
                formatter: "{value}"
              }
            },
            {
              type: "value",
              gridIndex: 0,
              splitNumber: 12,
              splitLine: { show: false },
              axisLine: { show: false },
              axisTick: { show: false },
              axisLabel: { show: false },
              splitArea: {
                show: true,
                areaStyle: {
                  color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                }
              }
            }
          ],
          series: [
            {
              name: "逾期区间",
              type: "bar",
              barWidth: "20%",
              xAxisIndex: 0,
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  barBorderRadius: [0, 30, 30, 0],
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: "#00feff" },
                    { offset: 0.5, color: "#027eff" },
                    { offset: 1, color: "#0286ff" }
                  ])
                }
              },
              data: json.Data.DataList.map(item=>{
                return item.Data
              }),
              label:{
                show:true,position:'right',textStyle:{
                  color:'#fff',fontSize:12
                }
              },
              zlevel: 11
            }
          ]
        };
        this.chartInstance = this.$Crender("chart-risk-3", this.option);
        this.showLoading = false;
      });
    }
  }
};
</script>